<template>
  <div
    class="detail_shop_box_v3 item_floor"
    id="shopArea"
    style
    tourl="//shop.m.jd.com/shopv2/mzpage?shopId=679099&amp;venderId=683386&amp;skuId=68372945039&amp;categoryId=9987_653_655"
  >
    <div class="shop_info" id="shopLogoInfo">
      <span
        class="J_ping logo_wrap square"
        report-eventid="MProductdetail_ShopBanner"
        report-eventlevel="3"
      >
      <van-image
        class="shopLogo"
          id="shopLogo"
        :src="require('@/assets/song.svg')"
        width="40px"
        height="40px"
        round
        fit="scale-down"
      ></van-image>
   
      </span>
      <div class="shop_info_name" id="shopInfo">
        <div class="name">
          <div class="_n">松子自营专卖店</div>
        </div>
      </div>
    </div>
    <div class="info_tab" id="shopBaseInfo" style>
      <div class="tab_item">
        <p class="num">42万</p>
        <p class="desc">粉丝人数</p>
      </div>
      <div class="tab_item">
        <p class="num">808件</p>
        <p class="desc">全部商品</p>
      </div>
      <div class="evaluation tab_item">
        <div class="evaluation_wrap">
          <div class="evaluation_list">
            <span class="evaluation_list_head">评价</span>8.92 | 中
          </div>
          <div class="evaluation_list">
            <span class="evaluation_list_head">物流</span>9.43 | 高
          </div>
          <div class="evaluation_list">
            <span class="evaluation_list_head">售后</span>9.11 | 高
          </div>
        </div>
      </div>
    </div>
    <div class="shop_leading" id="shopLeading">
      <div class="shop_leading_ad">
        <img
          src="//img12.360buyimg.com/cms/jfs/t1/107054/4/13711/208391/5e5bcc73E34016ed7/32e6833be7bd0fbf.jpg!q70.dpg.webp"
          onerror="__reloadResource(this)"
        />
      </div>
      <div class="shop_leading_cat">
        <div class="leading_cat_li first" data-cate3="655">手机</div>
        <div class="leading_cat_li" data-cate3="13660">充电器</div>
        <div class="leading_cat_li" data-cate3="862">手机耳机</div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Image as VanImage } from 'vant';

Vue.use(VanImage);
export default {};
</script>

<style lang="scss">
._n {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.detail_shop_box_v3 {
  background-color: #fff;
  margin: 16px;
  border-radius: 10px;
  padding: 18px !important;
  font-size: 14px;
  color: #333;
  // 第一层
  .shop_info {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .logo_wrap.square {
      width: 40px;
      height: 40px;
      img {
        border-radius: 6px;
        width: 100%;
        height: 100%;
      }
    }
    .shop_info_name {
      -webkit-flex-shrink: 1;
      flex-shrink: 1;
      overflow: hidden;
      font-size: 0;
      line-height: 1;
      .name {
        display: flex;
        align-items: center;
        font-size: 13px;
        height: 13px;
        line-height: 13px;
        overflow: hidden;
        flex-wrap: wrap;
      }
    }
  }
  // 第二层
  .info_tab {
    margin: 18px 0;
    display: flex;
    .tab_item {
      flex: 1;
      position: relative;
      padding: 2px 0;
      text-align: center;
      .num {
        margin-bottom: 3px;
        font-size: 14px;
      }
      .desc {
        margin-top: 3px;
        font-size: 10px;
        color: #999;
      }
    }
    .evaluation {
      .evaluation_wrap {
        text-align: left;
        font-size: 10px;
        .evaluation_list {
          color: #e4393c;
          .evaluation_list_head {
            margin-right: 5px;
            color: #999;
          }
        }
      }
    }
  }
  // 第三层
  .shop_leading {
    position: relative;
    height: 92px;
    margin: 8px 0 15px;
    .shop_leading_ad {
      width: 224px;
      margin-right: 5px;
      float: left;
      img {
        width: auto;
        height: 92px;
        max-width: 100%;
        border-radius: 6px;
      }
    }
    .shop_leading_cat {
      
      // float: left;
      // margin-left: 8px;
      .leading_cat_li {
        margin-bottom: 4px;
        background: #f7f7f7;
        border-radius: 4px;
        padding: 0 2px;
        height: 28px;
        line-height: 28px;
        font-size: 12px;
        color: #666;
        text-align: center;
      }
    }
  }
}
</style>